@import "../comment/header";
@import "../comment/body";
@import "../comment/footer";
@import "../comment/constants";
@import "../comment/init";
@import "course_nav";

.main{
  .wrapper{
    margin-top: 20px;
    .course-list{
      //自动横向均匀排列
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      li{
        height:300px;
        width:278px;
        background: #fff;
        margin-bottom:20px;
        &:hover{
          box-shadow: 0 3px 20px rgba(0,0,0,0.2);
        }
        a{
          .thumbnail-group{
            height:156px;
            width:278px;
            img{
              width:100%;
              height:100%;
            }
          }
        }
        .course-info{
          padding:15px;
          margin-top:10px;
          position: relative;
          height:144px;
          box-sizing: border-box;
          .title{
            color: #000;
            font-size: 16px;
          }
          .author{
            color: #888;
            margin-top:10px;
            font-size:14px;
          }
          .price-group{
            position: absolute;
            left:16px;
            bottom:16px;
            right:20px;
            text-align: right;
            .free{
              color: #7ed321;
            }
            .pay{
              color: #f44b4b;
            }
          }
        }
      }
    }
  }
}